import './assets/main.css'
import './assets/mobile.css'
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(ElementPlus, {
  size: 'default',
  zIndex: 3000,
  componentSize: window.innerWidth <= 768 ? 'small' : 'default'
})
app.use(router)

// 添加移动端检测
const isMobile = window.innerWidth <= 768;
app.config.globalProperties.$isMobile = isMobile;

// 监听窗口大小变化
window.addEventListener('resize', () => {
  app.config.globalProperties.$isMobile = window.innerWidth <= 768;
});

// 添加移动端手势支持
app.directive('touch-ripple', {
  mounted(el) {
    el.addEventListener('touchstart', (e) => {
      const rect = el.getBoundingClientRect();
      const ripple = document.createElement('div');
      ripple.className = 'touch-ripple-effect';
      ripple.style.left = `${e.touches[0].clientX - rect.left}px`;
      ripple.style.top = `${e.touches[0].clientY - rect.top}px`;
      el.appendChild(ripple);
      
      setTimeout(() => {
        ripple.remove();
      }, 400);
    });
  }
});

// 添加性能监控
if (process.env.NODE_ENV === 'production') {
  // 监控页面性能
  window.addEventListener('load', () => {
    setTimeout(() => {
      const timing = window.performance.timing;
      const loadTime = timing.loadEventEnd - timing.navigationStart;
      console.log('页面加载时间：', loadTime);
    }, 0);
  });
}

app.mount('#app')
